<template>
  <div class="select-subject">
      <div class="mb-2 flex items-center text-sm">
        <el-radio-group v-model="state.selectedSubjectId" class="ml-4" @change="onChangesubject">
          <el-radio-button label="信息" size="small" value="信息" />
          <el-radio-button label="通用" size="small" value="通用" />
          <el-radio-button label="职高" size="small" value="职高" />
        </el-radio-group>
      </div>
    </div>
    <div  class="menu">
      <el-menu  class="el-menu-vertical-demo" background-color="#ffffff">
          <template v-for="courseitem in state.guidePaperMenuData" :key="courseitem.id">         
              <el-menu-item v-if="courseitem.children.length===0"                        
                  :key="courseitem.id" :index="courseitem.id.toString()">                    
                  <template #title>
                      <span>{{ courseitem.name }}</span>
                  </template>
              </el-menu-item>                               
              <el-sub-menu v-if="courseitem.children.length > 0" :key="courseitem.id" :index="courseitem.id.toString()">
                  <template #title>
                      {{ courseitem.name}}
                  </template> 
                  <template v-for="knowledgepointitem in courseitem.children" :key="courseitem.id">
                      <el-menu-item 
                      :index="knowledgepointitem.id.toString()"
                      @click="SelectKnowledgeClick(knowledgepointitem.id)">                                                
                      {{ knowledgepointitem.name }}                                            
                      </el-menu-item>
                  </template>              
              </el-sub-menu>                       
          </template>          
      </el-menu>
    </div>
</template>
  
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { onMounted, reactive } from "@vue/runtime-core"
import axios from '@/utils/axios'
import { localGet, localSet, deepClone } from '@/utils'

const router = useRouter()
const props = defineProps({
    menu_list: Array,
});
onMounted(()=>{
  console.log('导学案侧边目录页面加载事件')
  getSubjectData()
  getCategory()
})
// 反向根据学科名，获取其id
const subjecnt_value_dic = {信息:'1', 通用: '2', 职高:'3'}
const state = reactive({
  guidePaperMenuData :null,
  subjectList:[],
  selectedSubjectId: '1',
})
// 学科改变了,重新根据选中的学科获取章节目录
const onChangesubject = (value)=>{
  // console.log('subject change:', value)
  state.selectedSubjectId = subjecnt_value_dic[value]
  // console.log('学科id',state.selectedSubjectId)
  getCategory()
}
// 获取所有学科，并设置默认选中第一个学科
const getSubjectData = ()=>{
  const subjectListCache = localGet('subjectListCache')
  const subjectListCacheStartTime = localGet('subjectListCacheStartTime')
  const currentDate = new Date();
  const currentYear = currentDate.getFullYear()
  const currentMonth = currentDate.getMonth() + 1
  const currentDay = currentDate.getDate()
  const currentTime = currentYear*10000 + currentMonth * 100 + currentDay
  if(subjectListCache!=undefined && subjectListCacheStartTime!=undefined && subjectListCacheStartTime>20240000){    
    const dateDiff = currentDate.getDate() - subjectListCacheStartTime // 获取两个时间的差值（以秒为单位）
    console.log('subjectListCacheStartTime：',dateDiff)
    if(dateDiff <= 1){
      if(subjectListCache!=[]){
        state.subjectList = subjectListCache
        state.selectedSubjectId = state.subjectList[0].id
        return 1
      } 
    }
  }
  axios.get('/SubjectViewSet').then(res => {
      console.log('获取学科：', res)
        if (res.code==200){
            state.subjectList = res.data.results
            state.selectedSubjectId = state.subjectList[0].id
            localSet('subjectListCache', res.data.results)
            localSet('subjectListCacheStartTime', currentDate.getDate())
        }else{       
            console.log("error", res.message)
        }
    })
    .catch((error)=>{
        console.log("获取章节菜单错误：", error)
    })
}
// 选中知识点后，转到该导学案的路由，下个路由会请求后台获取导学案
const SelectKnowledgeClick = (id)=> {
    // console.log("我是导学案菜单，发送id",id)
    router.push({path:'/getGuidePapersByKnowledgepoint', query:{ id: id}})        
    // state.select_knowledge_id = id
}
// 获取导学案目录
const getCategory=()=>{
  const guidePaperMenuCache = localGet('guidePaperMenuCache'+state.selectedSubjectId)
  const guidePaperMenuCacheStartTime = localGet('guidePaperMenuCacheStartTime'+state.selectedSubjectId)
  const currentDate = new Date();
  const currentYear = currentDate.getFullYear()
  const currentMonth = currentDate.getMonth() + 1
  const currentDay = currentDate.getDate()
  const currentTime = currentYear*10000 + currentMonth * 100 + currentDay
  if(guidePaperMenuCache !=undefined && guidePaperMenuCacheStartTime!=undefined && guidePaperMenuCacheStartTime>20240000){    
    const dateDiff = currentDate.getDate() - guidePaperMenuCacheStartTime // 获取两个时间的差值（以秒为单位）
    console.log('天数：',dateDiff)
    if(dateDiff <= 1){
      if(guidePaperMenuCache!=[]){
        state.guidePaperMenuData = guidePaperMenuCache
        return 1
      }
    }
  }
  let params = {
    subject_id: state.selectedSubjectId,
  }
    axios.get('/knowledgepoints/get_knowledge_all_subject_and_course_for_compose', {params}).then(res => {
        console.log('后台获取导学案目录获取结果：', res)
        if (res.code==200){
            state.guidePaperMenuData = res.data.results  
            localSet('guidePaperMenuCache'+state.selectedSubjectId, res.data.results)
            localSet('guidePaperMenuCacheStartTime'+state.selectedSubjectId, currentTime)  
        }else{          
            console.log("error", res.message)
        }
    })
    .catch((error)=>{
        console.log("后台获取导学案菜单错误：", error)
    })
}

</script>

<style scoped>
    .menu{
        display: flex;
        flex-flow: column nowrap;
        width: 200px;
        overflow: hidden;
        background-color: #fcf2e6;
    }
    span{
        font-size: 10x;
        color: #000;
    }
    a{
        text-decoration: none;
        color:#333;
        font-family:sans-serif;
        font-size: 12px;
    }
</style>